<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入相关信息, 点击提交数据会显示在表格中</p>
        <div class="div1">
            <span> 谁：</span> <input type="text" class="edit">
        </div>
        <div class="div1">
            <span>对谁：</span> <input type="text" class="edit">
        </div>
        <div class="div1">
            <span>说：</span> <input type="text" class="edit">
        </div>
        <div class="div1">
            <input type="button" value="提交" class="submit" onclick="submit()">
        </div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 400px;
        margin: 0 auto;
    }

    p {
        text-align: center;
        color: grey;
        line-height: 40px;
    }

    h1 {
        text-align: center;
        margin-bottom: 10px;
    }

    .div1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .edit {
        margin: 15px 0;
        width: 350px;
        height: 30px;
    }

    span {
        width: 50px;

    }

    .submit {
        background-color: rgb(255, 187, 0);
        color: white;
        font-size: 18px;
        font-weight: 800;
        border-radius: 5px;
        border-width: 0;
        width: 250px;
        height: 40px;
    }

    .submit:active {
        background-color: grey;
    }
</style>

<script>
    function submit() {
        let edits = document.querySelectorAll(".edit");
        let from = edits[0].value;
        let to = edits[1].value;
        let message = edits[2].value;
        //创建节点
        let div = document.createElement("div");

        div.className = "div1";

        div.innerHTML = "[" + from + "]" + "对" + "[" + to + "]" + "说:" + message;

        //插入节点
        let container = document.querySelector(".container");
        container.appendChild(div);
    }
</script>

</html>